Name of your website or page

There are different types of computer files. Documents (doc) are written files like word documents, text documents, and html documents. Other files are images (img) like .png, .jpg, and .svg. And of course audio files like .mp3, .wav or .wav and video files like .mp4. Websites are made from a single or multple webpages. A webpage is written using Hyper Text Markup Language (HTML). "Markup" means that the text will be wrapped with formatting tags to change the size, color, font, position, margin and other attributes. Websites and even word processing software use markup language to format the text seen on a screen. A formatted text is text that is arranged with line breaks to start new paragraphs, and how wide the space between paragraphs are, among other details to make txt more readable. Without markup language text tends to be one big blob of words only seperated by a single space, no padding, no line breaks. Without line breaks, a paragraph will be rendered as a single line. Line breaks are what happens when you press the enter key using a word processor program like microsoft word, or Openoffice, to start a new line. Saying page break is the same thing as saying "new line". The opposite of markup is markdown (MD). Markdown is used mostly in text editors like microsoft notepad. This is very simple format that creates smaller files than microsoft word, this save space on hard-drive, loads and saves faster, but is very plain looking. Other uses for markdown is to write simple files to be stored by a database or other computer program. We will use .txt and .MD files when building websites so it is important to understand these file extensions. File extensions are the letters after the name of a file. Format follows "name of file" followed by ".file extension". The name of the file and the file extension are seperated by a period, such as "image.png" or "song.mp3". File extensions tell the computer what program to use to open a file. Different types of files are encoded such that they can only be opened correctly by certain programs designed to run them. Users set "file associations" to tell an operating system how to open a file. Common example: You have an android phone and take a selfie. You go to your file manager in the phone and tp on photo. Android asks what program you want to use to open the photo: gallery, or photo viewer. It also asks if you want to use this program just once or always. If you choose always then you have set the file association for that file type. A file association is a mapping of what file extensions to what program, also known as file extension defaults, these are programs that open by default without being changed by users. To write HTML you need a text editor. Pick one: notepad, sublime, vs code, coffecup, web app editor or other. For these lessons I will use notepad and then sublime. Here is the minimal html needed to make a webpage: But we want to use this: Name of your website or page Code inside brackets are called tags. These are HTML tags. Type the code above into an editor and save it as blank.html or blank.htm. This creates a blank template to make future pages. 1. In notepad type blank.html for file name. Then change file type from .txt to "all files". This allows you to save the file with anmy file extension. If you do not change the default setting it will save as a text file named blank.html.txt. This has a file name of "blank.html" with ".txt" as the file extension. If you change file type to "all files" notepad will save it as "blank.html" where the name of the file is simply "blank" and ".html" is the extension. In Windows file extensions are not shown so your file will only show "blank" not "blank.html" because file extensions are ugly and we do not want to see them. If viewing files as icons they will appear using the icon file for what type of program opens them. I use Chrome as my default web browser so "blank.html" will shoe up in my folder as "blank" with a logo icon for chrome telling me that it is a webpage or link to a website. 2. If you are using sublime save file as "blank" and then use the drop down box to select "HTML" as the file type. If there are weird HTML options just use the normal one that says "HTML,HTM, etc, etc". Explaination of code Every webpage must declare it's type. The following tag is a called an HTML declaration tag: It's job is to tell web browers it is a webpage rather than a different type of internet resource or service. This tells search engines and browsers what language your page is written in. Here I am using English: . This tag is used to nest metadata used by search engines for seo: . SEO stands for Search Engine Optimization, which means the better your SEO the higher up in searches your site will appear. This is important if your are running a business and you are using your website for advertising and marketing. More people will find your site and you will have more interactions with the public because your site is more public, more visibly seen. This tag tells browsers what encoding to use to render site: Render means "to run code and make visible the results" . UTF-8 is the standard encoding for all text documents in English in the Westrern Hemisphere. Encpdings used here mean things like what alphabet you are using and what character set (char-set), not what language you are typing in. For example French have latin letters but a different keyboard so they would use a different encoding. Asian languages do not have latin letters at all so would need an encoding that handles Asian char-sets, for example simplified Chinese. Viewport gives instructions on how webpages should be displayed on different devices with different screen sizes, such as monitors, tablets, and smartphones: . This tells browser what text to display when a mouse hovers over a tabName of your website or page. This is a link to a favicon. A favicon is an avatar or logo for your website: This is a link to a stylesheet. Css is a simple language used with HTML to format or style your webpages: This is an end tag that closes the opening tag: Html has two types of tags, open and closed. Closed tags are used to nest text which open tags operate bythemselves. Nested text is like My Title where you need to start the tag and to close the tag. An open tag is like
which does not have a matching
.
means "break space" and creates a new line, same as the tag. This tells the browser what is to be visibly shown in your webpage: This closes the tag: This closes the tag: 1. All webpages start with and need this declaration: 2. It is proper to state your websites language: 3.